<template>

  <div id="app" class="homeWrap">
  <el-container style="height:100%">
    <el-aside width="200px">

      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false"><i class="el-icon-circle-plus">&nbsp;展开</i></el-radio-button>
        <el-radio-button :label="true"><i class="el-icon-remove">&nbsp;收起</i></el-radio-button>
      </el-radio-group>
      <el-menu  default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu :index="m.id+''" v-for="m in childMenus">
          <template slot="title">
            <i :class="m.icon"></i>
            <span slot="title" style="color: #bebec1">{{m.mname}}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item v-for="ms in m.childMenus"  v-if="ms.childMenus == ''" :index="ms.id+''" @click="addTab(ms.mname,ms.linkUil)" size="small" >
              <span slot="title" style="font-size: 6px" :class="ms.icon" >{{ms.mname}}</span>
            </el-menu-item>

            <el-submenu v-if="mxs.childMenus != ''" :index="mxs.id+''" v-for="mxs in m.childMenus" >
              <template slot="title" >
                <span :class="mxs.icon" style="font-size: 6px;position: relative;left: -12px" >{{mxs.mname}}</span>
              </template>
              <el-menu-item :index="mss.id+''" v-for="mss in mxs.childMenus"  @click="addTab(mss.mname,mss.linkUil)">
                <span  slot="title" style="font-size: 1px" :class="mss.icon"  size="small">{{mss.mname}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu-item-group>


        </el-submenu>

      </el-menu>

    </el-aside>
    <el-container>
      <el-header>

        <el-tabs v-model="editableTabsValue"   id="tabs"  type="card"  @tab-remove="removeTab">
          <el-tab-pane
            :key="editableTabs[0].name"
            :label="editableTabs[0].title"
            :name="editableTabs[0].name"
          >
            <StatisticalView></StatisticalView>
          </el-tab-pane>

          <el-tab-pane  closable
            v-for="(item, index) in editableTabs.slice(1)"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <component :is="item.content"></component>
          </el-tab-pane>
        </el-tabs>

      </el-header>
      <el-main>
      </el-main>
    </el-container>
  </el-container>

  </div>
</template>


<script>

  import Staff from "./staff/Staff";
  //仓库管理
  import WarehouseInfoList from "../lifukang/components/management_warehouseInfo/WarehouseInfoList";
  import checkWarehouseInfo from "../lifukang/components/management_warehouseInfo/checkWarehouseInfo";
  import designatedWarehouse from "../lifukang/components/management_warehouseInfo/designatedWarehouse";
  import checkWarehouseDetailsInfo from "../lifukang/components/management_warehouseInfo/checkWarehouseDetailsInfo";
  import checkGatherInfo from "../lifukang/components/management_warehouseInfo/storageManagement/checkGatherInfo";
  import purchaseOrderSigned
    from "../lifukang/components/management_warehouseInfo/storageManagement/purchaseOrderSigned";
  import storageQuery from "../lifukang/components/management_warehouseInfo/storageManagement/storageQuery";
  import Warehouse_cargo_allocation from "../lifukang/components/management_warehouseInfo/Warehouse_cargo_allocation";
  import checkPayInfo from "../lifukang/components/management_warehouseInfo/deliveryOfCargoManagement/checkPayInfo";
  //入库管理
  import storageManagementList from "../lifukang/components/management_warehouseInfo/storageManagement/storageManagementList";
  //供应商
  import supplier_info_change from "../lifukang/components/supplier/supplier_info_change";
  import supplier_check from "../lifukang/components/supplier/supplier_check";//注册供应商审核
  import supply_of_goods_check from "../lifukang/components/supplier/supply_of_goods_check";//供应商品审核
  //总店
  import AddShop from "../liwentao/shopview/AddShop"; //添加商品
  import ShopView from "../liwentao/shopview/ShopView"; //商品展示
  import ShopTypeView from "../liwentao/shopType/ShopTypeView"; //商品分类展示
  import AddShopType from "../liwentao/shopType/AddShopType"; //添加商品分类
  import AddPurchase from "../liwentao/purchase/AddPurchase"; //添加采购单
  import PurchaseView from "../liwentao/purchase/PurchaseView"; //显示所有采购单
  import AuditPurchase from "../liwentao/purchase/AuditPurchase"; //采购审核

  import Authority from "./authority/Authority";
  import Roles from "./roles/Roles"; //角色
  import Users from "./users/Users";

  //菜单
  import menus from "../caoke/orders/menus";

  //商户
  import commercial_check from "../lifukang/components/commercial/commercial_check";
  //订单管理
  import OrderTabPaneBack from "../liwentao/orderViewBack/OrderTabPaneBack";
  import ReturnView from "../liwentao/returnShop/ReturnView";

  //后台统计
  import StatisticalView from "../liwentao/ statistical/StatisticalView";

  export default {
    name: "Home",
    data(){
      return{
        mid:"",
        activeIndex: '',
        childMenus:[],
        childMenus02:[],
        isCollapse: true,
        com:"",
        editableTabsValue: '1',
        editableTabs:[{
          title: '首页',
          name: '1',
          content: '老李头系统欢迎你!'}
        ],
        tabIndex:1
      }
    },
    components:{
      menus,
      Staff,
      AddShop,
      ShopView,
      AddPurchase,
      PurchaseView,
      AuditPurchase,
      WarehouseInfoList,
      checkWarehouseInfo,
      designatedWarehouse,
      supplier_check,
      ShopTypeView,
      supply_of_goods_check,
      supplier_info_change,
      commercial_check,
      checkWarehouseDetailsInfo,
      storageManagementList,
      Roles,
      Authority,
      Users,
      checkGatherInfo,
      storageQuery,
      purchaseOrderSigned,
      AddShopType,
      OrderTabPaneBack,
      ReturnView,
      Warehouse_cargo_allocation,
      StatisticalView
    },
    methods:{
      getdata(){

            let SystemUsers = new URLSearchParams()

            SystemUsers.append("suName",sessionStorage.getItem("suName"))

            SystemUsers.append("suPwd",sessionStorage.getItem("suPwd"))

        this.$axios.post("SystemUsers.action",SystemUsers).
        then(request=>{
          this.childMenus = request.data
          this.activeIndex = this.childMenus[0].id+''
          this.getmenuid()
        }).
        catch()
      },
      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath);
      },
      getmenuid(mid){

        let SystemUsers = new URLSearchParams()

        SystemUsers.append("suName",sessionStorage.getItem("suName"))

        SystemUsers.append("suPwd",sessionStorage.getItem("suPwd"))


        if (mid==undefined && mid==null){
          SystemUsers.append("mid",this.activeIndex)
        }else {
          SystemUsers.append("mid",mid)
        }


        this.$axios.post("quertop.action",SystemUsers).
        then(request=>{
          console.log(request.data)
          this.childMenus02 = request.data
        }).
        catch()
      }
      ,
      addTab(targetName,valuename) {
        var arr = this.editableTabs.find(itme=>itme.title==targetName);
        if (arr!=null){
          this.editableTabsValue=arr.name;  //选中
          return ;
        }

        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: targetName,
          name: newTabName,
          content: valuename
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },
    created() {
      this.getdata()
    }
  }
</script>

<style scoped>
  #app{
    height: 100%;

    width: 100%;
    height: 100%;
  }
</style>
